import React from 'react';
import { Table, Popover, Row, Divider, Icon as AntdIcon } from 'antd';
import { Icon } from '@/pages/Recruitment/components';
import { history } from 'umi';
import { renderShortDate } from '@/pages/OnboardAndLeave/LeaveManagement/renderUtil';

import styles from './index.less';

export default function PayrollComputationTable({
    leavePayrollData,
    compensation,
    loading,
    generateLeavePayrollRun,
    type,
    containSalaryFlag,
    dimissionType
}) {
    const payroll = React.useMemo(() => {
        if (leavePayrollData && leavePayrollData.payrollList) {
            const { payrollList } = leavePayrollData;
            let sum = 0;
            if (payrollList && payrollList.length > 0) {
                for (let i = 0, len = payrollList.length; i < len; i += 1) {
                    sum += Number(payrollList[i].encryptTotalPayAmt);
                }
            }
            return sum.toFixed(2);
        }
        return '';
    }, [leavePayrollData]);
    const showPayrollList = React.useMemo(() => {
        if (leavePayrollData && leavePayrollData.payrollList) {
            const list = leavePayrollData.payrollList.map(item => ({
                ...item,
                ...item.dynamicSalaryPayrollInfo,
                ...item.dynamicEmployeeInfo
            }));
            return list;
        }
        return [];
    }, [leavePayrollData]);
    let arr2 = [];
    if (containSalaryFlag !== 0) {
        arr2 = [
            {
                name: '薪资',
                mount: payroll,
                explain: '加项',
                key: 'payroll'
            }
        ];
    }
    // let arr3 = [];
    // if (dimissionType === 2) {
    //     arr3 = [
    //         {
    //             name: '经济补偿金',
    //             mount: compensation || 0,
    //             explain: '加项',
    //             key: 'compensation'
    //         }
    //     ];
    // }
    const dataSource = [...arr2];
    const gotoDataImportPage = () => {
        history.push({
            pathname: '/finance/salary/calculate/importexcel/salarySpecialDeduct',
            state: { tabRoute: true }
        });
    };
    let arr = [];
    if (type !== 'detail') {
        arr = [
            {
                title: '操作',
                dataIndex: 'work',
                key: 'work',
                render: (_, record) =>
                    record.name === '薪资' ? (
                        <Row type="flex" align="middle">
                            {type === 'personnel' && (
                                <>
                                    <Icon
                                        title="导入绩效系数"
                                        type="denglu"
                                        style={{ cursor: 'pointer', fontSize: 22 }}
                                        onClick={gotoDataImportPage}
                                    />
                                    <Divider type="vertical" />
                                </>
                            )}
                            <Icon
                                title="刷新数据"
                                type="zhuangtaibiangeng"
                                style={{ cursor: 'pointer', fontSize: 22 }}
                                onClick={generateLeavePayrollRun}
                            />
                        </Row>
                    ) : (
                        <></>
                    )
            }
        ];
    }
    const columns = React.useMemo(
        () => [
            {
                title: '条目',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '金额',
                dataIndex: 'mount',
                key: 'mount',
                render: val => (
                    <span>
                        {val === '' ? (
                            <>
                                待计算
                                <Popover placement="right" content="薪资计算将在离职日期当天自动触发" trigger="hover">
                                    <AntdIcon
                                        type="question-circle"
                                        style={{ color: 'rgba(0,0,0,0.45)', marginLeft: '4px' }}
                                    />
                                </Popover>
                            </>
                        ) : (
                            val
                        )}
                    </span>
                )
            },
            {
                title: '说明',
                dataIndex: 'explain',
                key: 'explain'
            },
            ...arr
        ],
        [leavePayrollData, compensation, payroll]
    );
    // 嵌套子表格
    const expandedRowRender = (record, index) => {
        const columns2 =
            leavePayrollData?.tableHeaderList?.map(item => {
                const temp = {
                    title: item.title,
                    dataIndex: item.dataIndex,
                    key: item.dataIndex,
                    width: 150,
                    render: (val, record2) =>
                        item.dataIndex === 'startDate' ||
                        item.dataIndex === 'endDate' ||
                        item.dataIndex === 'birthday' ? (
                            renderShortDate(val, 'YYYY-MM-DD')
                        ) : (
                            <span
                                style={{
                                    color: val < 0 || record2.colorControl === 1 ? 'red' : 'rgba(0, 0, 0, 0.65)'
                                }}
                            >
                                {val || '--'}
                            </span>
                        )
                };
                if (item.children.length > 0) {
                    temp.align = 'center';
                    temp.width = 150 * item.children.length;
                    temp.children = item.children.map(item2 =>
                        // amountColumn({
                        //     title: item2.title,
                        //     dataIndex: item2.dataIndex,
                        //     key: item2.dataIndex
                        // })
                        ({
                            title: item2.title,
                            dataIndex: item2.dataIndex,
                            key: item2.dataIndex,
                            align: 'right',
                            width: 150,
                            render: val2 => (
                                <span
                                    style={{
                                        color: val2 < 0 || item2.colorControl === 1 ? 'red' : 'rgba(0, 0, 0, 0.65)'
                                    }}
                                >
                                    {val2 || '--'}
                                </span>
                            )
                        })
                    );
                }
                return temp;
            }) || [];
        return index === 0 ? (
            <Table
                className={styles.childTable}
                columns={columns2}
                dataSource={showPayrollList}
                pagination={false}
                scroll={{ x: 1100 }}
                bordered
            />
        ) : null;
    };
    return (
        <div style={{ marginBottom: 16 }}>
            <Table
                expandedRowRender={
                    containSalaryFlag !== 0 &&
                    leavePayrollData &&
                    leavePayrollData.payrollList &&
                    leavePayrollData.payrollList.length > 0
                        ? expandedRowRender
                        : null
                }
                // rowClassName={record => (record.name === '薪资' ? '' : styles.tableHideRowClassName)}
                columns={columns}
                dataSource={dataSource}
                pagination={false}
                loading={loading}
                scroll={{ x: 1200 }}
            />
            {/* 1.如果离职设置财务清算选择了不包含薪资，那么因为补偿金属于薪资所以也不展示（人事交接没有这个控制） */}
            {/*        containSalaryFlag：是否包含薪资(0=否 1=是)    */}
            {/* 2.只有被动离职才有经济补偿金 */}
            {/*        dimissionType：离职类型(1=主动离职 2=被动离职)  */}
            {containSalaryFlag !== 0 && dimissionType === 2 && (
                <div>
                    <span style={{ color: '#f5222d', fontFamily: 'SimSun, sans-serif' }}>* </span>
                    薪资包含经济补偿金：
                    <span>{compensation || 0}</span>
                    <Popover placement="right" content="此处为税前金额，个人所得税已合并到薪资中扣除" trigger="hover">
                        <AntdIcon type="question-circle" style={{ color: 'rgba(0,0,0,0.45)', marginLeft: '4px' }} />
                    </Popover>
                </div>
            )}
        </div>
    );
}
